<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>商品录入</title>

    <!--引入 element-ui 的样式，-->
    <link rel="stylesheet" href="/admin/plugin/element-ui/index.css">
    <!-- 必须先引入vue，  后使用element-ui -->
    <script type="text/javascript" src="/admin/js-css/js/vue.min.js"></script>
    <!-- 引入element 的组件库-->
    <script type="text/javascript" src="/admin/plugin/element-ui/index.js"></script>

    <script type="text/javascript" src="/admin/plugin/element-ui/httpVueLoader.js"></script>

    <!--引入layui组件-->
    <link rel="stylesheet" href="/admin/plugin/layui/dist/css/layui.css" tppabs="http://res.layui.com/layui/dist/css/layui.css"  media="all">
    <script src="/admin/plugin/layui/dist/layui.js" charset="utf-8"></script>

    <script type="text/javascript" src="/admin/js-css/js/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="/admin/js-css/js/mx1.0.js?v=1.1"></script>

    <style>
        .changeLHight .el-form-item__label{
            line-height: 16px !important;
        }
        .el-collapse-item__content {
            padding-bottom: 2px;
        }
    </style>

    <style type="text/css">
        .el-form-item--mini.el-form-item, .el-form-item--small.el-form-item {
            margin-bottom: 3px;
        }
        .el-form-item--small .el-form-item__content, .el-form-item--small .el-form-item__label {
            padding-right: 0px;
        }
        .el-tooltip__popper{ max-width:20%; }
        .el-tooltip__popper{
            display: none;
        }

        .el-table{
            /*font-weight: bold;*/
            overflow: visible !important;
        }

        .layui-table-click {
            background-color:cadetblue !important;
            color:white;
        }

        ::-webkit-scrollbar {
            width: 6px;
            height: 10px;
            background-color: rgba(255, 255, 255, 0.1);
        }

        ::-webkit-scrollbar-thumb {
            background: rgba(144, 147, 153, .3);
            border-radius: 4px;
            cursor: pointer;
        }
        .layui-form-label {
            float: left;
            display: block;
            padding: 7px 1px;
            width: 100px;
            font-weight: 400;
            line-height: 14px;
            text-align: right;
        }

        /**输入框高度设置**/
        .layui-input, .layui-select, .layui-textarea {
            height: 30px;
            line-height: 30px\9;
        }
        /**按钮样式设置**/
        .layui-btn {
            height: 30px;
            line-height: 30px;
            font-size: 13px;
        }
        .layui-btn+.layui-btn {
            margin-left: 0px;
        }

        .layui-table, .layui-table-view {
            margin: 0px 0;
        }

        .changeLHight .el-form-item__label{
            line-height: 16px !important;
        }

        /**列表内容超出自动换行**/
        /*.layui-table-cell {
            height: auto;
            overflow:visible;white-space:normal;text-overflow:clip;
            word-break: break-all;
        }*/


        /* 列表样式修改*/
        /* 去掉最下面的那一条线 */
        .el-table::before {
            height: 0px;
        }

        /* 表格斑马自定义颜色 */
        .el-table__row.warning-row {
            background: #F1F1F1;
        }

        /* 合计颜色重置 */
        .el-table__footer-wrapper tbody td.el-table__cell {
            background: #fff;
        }

        table {
            border-color: black !important;
        }

        /** 改变边框颜色 */
        /* .el-table--border,
        .el-table--group {
            border: 1px solid #CCCCCC !important;
        } */

        /** 改变表格内竖线颜色 */
        .el-table--border td,
        .el-table--border th,
        .el-table__body-wrapper .el-table--border.is-scrolling-left~.el-table__fixed {
            border-right: 1px solid #CCCCCC !important;
        }

        /** 改变表格内行线颜色 */
        .el-table td,
        .el-table th.is-leaf {
            border-bottom: 1px solid #CCCCCC !important;
        }

        .el-table thead tr th {
            border-color: #8c939d;

        }
        .el-table th.el-table__cell{
            background: #f5f7fa;
        }
        .el-table thead {
            color: #606266;
        }
        .el-table td{
            font-size: 14px;
            background: #dfefff6b;
        }

        .el-divider--horizontal {
            margin: 12px 0px;
        }
    </style>


</head>
<body>
    <div id="app" style="padding: 0 25px;">
        <el-collapse v-model="activeNames" >
            <el-form :inline="true" :model="formData" :show-message="false" size="small" label-width="115px"  ref="formData" :rules="rules" class="demo-form-inline">
                <el-collapse-item title="基本信息" name="1">
                    <div>
                        <el-form-item label="商品编号："  class="" prop="spbh" >
                            <el-input v-model="formData.spbh" style="width:200px"></el-input>
                        </el-form-item>

                        <el-form-item label="商品名称："  class="" prop="name" >
                            <el-input v-model="formData.name" style="width:400px"></el-input>
                        </el-form-item>

                        <el-form-item label="商品分类："  class="" prop="spfl" >
                            <el-cascader  v-model="formData.spfl" clearable :props="cascaderProps.spfl" ref="spfl"
                            ></el-cascader>
                        </el-form-item>

                        <el-form-item label="单位："  class="" prop="ddbh" >
                            <el-input v-if="formData.kqddw" v-model="formData.dwstr" :disabled="sxdisable" @focus="duodanweiInput" style="width:200px"></el-input>
                            <el-select v-else style="width:200px" @change="onedanwei"
                                       v-model="formData.dw"  >
                                <el-option v-for="(item,index) in formData.listdw" :value="item.id" :label="item.name" ></el-option>
                            </el-select>
                            <el-checkbox :disabled="sxdisable"  v-model="formData.kqddw"  @change="duodanweiInput" >启用多单位</el-checkbox>
                        </el-form-item>

                        <el-form-item label="规格："  class="" prop="gg" >
                            <el-input v-model="formData.gg" style="width:200px"></el-input>
                        </el-form-item>

                        <!-- 循环输入属性-->
                        <el-form-item :label="item.name+'：'" v-for="(item,index) in formData.listsx" class="" >
                            <el-select style="width:200px" v-if="index == 0" @change="shuxingChange" multiple  :disabled="sxdisable"
                                       v-model="formData.sx1"  >
                                <el-option v-for="(itemsx,index1) in item.sxz" :value="itemsx.id" :label="itemsx.name" ></el-option>
                            </el-select>

                            <el-select style="width:200px" v-if="index == 1" @change="shuxingChange" multiple :disabled="sxdisable"
                                       v-model="formData.sx2"  >
                                <el-option v-for="(itemsx,index1) in item.sxz" :value="itemsx.id" :label="itemsx.name" ></el-option>
                            </el-select>
                        </el-form-item>

                    </div>
                </el-collapse-item>
                <el-collapse-item title="价格信息" name="2">
                    <div>
                        <!--单品同一价格-->
                        <template >
                            <el-table
                                    :data="tableData_jiage"
                                    size="mini"
                                    border
                                    style="width: 100%">

                                <el-table-column label="单位"
                                                 sortable="custom"
                                                 prop="dw_name"
                                                 width="100px"
                                                 :show-overflow-tooltip="true">
                                </el-table-column>

                                <el-table-column :label="item.name" v-for="(item,index) in formData.listsx"
                                                 sortable="custom"
                                                 :prop="'sx'+(index+1)+'name'"
                                                 :show-overflow-tooltip="true">
                                </el-table-column>

                                <el-table-column  label="零售价"
                                                  prop="lsj"
                                                 sortable="custom"
                                                 :show-overflow-tooltip="true" >
                                    <template  slot-scope="scope">
                                        <el-input  size="mini" v-model="scope.row.lsj"   ></el-input>
                                    </template>
                                </el-table-column>
                                <el-table-column  label="批发价"
                                                  sortable="custom"
                                                  prop="pfj"
                                                  :show-overflow-tooltip="true" >
                                    <template  slot-scope="scope">
                                        <el-input  size="mini"  v-model="scope.row.pfj" ></el-input>
                                    </template>
                                </el-table-column>
                                <el-table-column  label="最低售价"
                                                  sortable="custom"
                                                  prop="zdsj"
                                                  :show-overflow-tooltip="true" >
                                    <template  slot-scope="scope">
                                        <el-input  size="mini" v-model="scope.row.zdsj"  ></el-input>
                                    </template>
                                </el-table-column>
                                <el-table-column  label="进货价"
                                                  prop="jhj"
                                                  sortable="custom"
                                                  :show-overflow-tooltip="true" >
                                    <template  slot-scope="scope">
                                        <el-input  size="mini"  v-model="scope.row.jhj" ></el-input>
                                    </template>
                                </el-table-column>
                                <el-table-column  label="条形码"
                                                  sortable="custom"
                                                  :show-overflow-tooltip="true" >
                                    <template  slot-scope="scope">
                                        <el-input  size="mini" v-model="scope.row.txm"  ></el-input>
                                    </template>
                                </el-table-column>

                            </el-table>
                        </template>



                    </div>
                </el-collapse-item>
                <el-collapse-item title="期初库存" name="3">
                    <div>
                        <el-tabs v-model="formData.qichukucun" >
                            <el-tab-pane v-for="(item,index) in formData.listck" :label="item.name" :name="item.id">
                                <el-table
                                        :data="qckcsz[item.id]"
                                        size="mini"
                                        border
                                        style="width: 100%">

                                    <el-table-column :label="item.name" v-for="(item,index) in formData.listsx"
                                                     sortable="custom"
                                                     :prop="'sx'+(index+1)+'name'"
                                                     :show-overflow-tooltip="true">
                                    </el-table-column>

                                    <el-table-column :label="'期初库存量/'+mapdwname[formData.dw]"
                                                     sortable="custom"
                                                     prop="kcl"
                                                     :show-overflow-tooltip="true" >
                                        <template  slot-scope="scope">
                                            <el-input  size="mini" v-model="scope.row.kcl" @input="qichu_setfee(scope.row,'kcl')"   ></el-input>
                                        </template>
                                    </el-table-column>

                                    <el-table-column label="期初成本价"
                                                     sortable="custom"
                                                     prop="cbj"
                                                     :show-overflow-tooltip="true" >
                                        <template  slot-scope="scope">
                                            <el-input  size="mini"  v-model="scope.row.cbj" @input="qichu_setfee(scope.row,'cbj')"  ></el-input>
                                        </template>
                                    </el-table-column>

                                    <el-table-column label="期初总金额"
                                                     sortable="custom"
                                                     prop="zje"
                                                     :show-overflow-tooltip="true" >
                                        <template  slot-scope="scope">
                                            <el-input  size="mini" v-model="scope.row.zje" @input="qichu_setfee(scope.row,'zje')"   ></el-input>
                                        </template>
                                    </el-table-column>

                                    <el-table-column label="备注"
                                                     sortable="custom"
                                                     prop="bz"
                                                     :show-overflow-tooltip="true" >
                                        <template  slot-scope="scope">
                                            <el-input  size="mini" v-model="scope.row.bz"   ></el-input>
                                        </template>
                                    </el-table-column>

                                </el-table>
                            </el-tab-pane>
                        </el-tabs>
                    </div>
                </el-collapse-item>
                <el-collapse-item title="库存预警" name="4">
                    <div>
                        <el-form-item label="最低库存量："  class="" prop="ddbh" >
                            <el-input v-model="formData.zdkcl" style="width:200px"></el-input>
                        </el-form-item>
                        <el-form-item label="最高库存量："  class="" prop="ddbh" >
                            <el-input v-model="formData.zgkcl" style="width:200px"></el-input>
                        </el-form-item>
                    </div>
                </el-collapse-item>

            </el-form>
        </el-collapse>
    </div>
</body>

<script>
    var vm = new Vue({
        el: '#app',
        data:{
            activeNames:["1","2","3","4"],
            formData:{},
            rules:{},
            cascaderProps:{},//三级下拉框动态加载
            tableData_jiage:[],
            tableData_jiage_duodanwei:{},
            listdw_fuzhu:[{name:"",sl:"",dw:""}],//辅助单位多个
            mapdwname:{},//单位键值对
            mapsxname:{},//属性键值对
            qckcsz:{},//期初库存设置
            parmsData:{},
            sxdisable:false,
        },
        created(){
            this.parmsData = getParams();
            if(this.parmsData.id != undefined){
                this.getFormdata();
            }else {
                this.init();
            }
            this.loadCascader();
        },
        methods:{
            async getFormdata(){
                const res = await postWebCustom(getTableId("972"),{id:this.parmsData.id});
                this.formData = res.data;
                this.formData.sx1 = JSON.parse(this.formData.sx1);
                this.formData.sx2 = JSON.parse(this.formData.sx2);
                this.formData.spfl = [this.formData.spfl];
                if(this.formData.kqddw == "1"){
                    this.formData.kqddw = true;
                }else {
                    this.formData.kqddw = false;
                }
                this.sxdisable = true;
                this.listdw_fuzhu = JSON.parse(res.data.dw_json);
                this.mapsxname = res.data.mapsxname;
                this.mapdwname = res.data.mapdwname;
                this.tableData_jiage = res.data.listmx;
                this.qckcsz = res.data.qckcsz;


                vm.$nextTick(function (){
                    //商品分类回显
                    vm.$refs["spfl"].inputValue = res.data.spfl_str;
                    vm.$refs["spfl"].presentText = res.data.spfl_str;
                });

            },
            async init(){
                const res = await postWebCustom(getTableId("1062"),{});
                this.formData = res.data;
                this.mapsxname = res.data.mapsxname;
                this.mapdwname = res.data.mapdwname;
            },
            qichu_setfee(row,field){
                if(field == "kcl"){
                    row.zje = Number(row.kcl)*Number(row.cbj);
                }
                if(field == "cbj"){
                    row.zje = Number(row.kcl)*Number(row.cbj);
                }
                if(field == "zje"){
                    row.cbj = Number(row.zje)/Number(row.kcl);
                }
            },
            addshuxing(sx1,sx2,dwid){
                let sx1name = this.mapsxname[sx1];
                let sx2name = this.mapsxname[sx2];
                let dwname = this.mapdwname[dwid];
                this.tableData_jiage.push({sx1name:sx1name,sx2name:sx2name,sx1:sx1,sx2:sx2,lsj:"",pfj:"",zdsj:"",jhj:"",dw:dwid,dw_name:dwname});

                //更新期初库存
                if(dwid == this.formData.dw){
                    this.formData.listck.forEach(function (e,index){
                        vm.qckcsz[e.id].push({sx1name:sx1name,sx2name:sx2name,sx1:sx1,sx2:sx2,ckid:e.id});
                    });
                }
            },
            onedanwei(){
                vm.listdw_fuzhu = [];
                vm.listdw_fuzhu.splice(0,0,{"dw":vm.formData.dw,sl:"1"});
                this.shuxingChange();
            },
            //属性多选择后操作
            shuxingChange(){
                //更新期初库存
                for(let c=0;c<this.formData.listck.length;c++){
                    this.qckcsz[this.formData.listck[c].id] = [];
                }

                this.tableData_jiage = [];
                if(this.formData.sx1.length>0 && this.formData.sx2.length>0){
                    for(let d=0;d<vm.listdw_fuzhu.length;d++){
                        for(let a=0;a<this.formData.sx1.length;a++){
                            for(let i=0;i<this.formData.sx2.length;i++){
                                let sx1 = this.formData.sx1[a];
                                let sx2 = this.formData.sx2[i];
                                this.addshuxing(sx1,sx2,this.listdw_fuzhu[d].dw);
                            }
                        }
                    }
                }
                if(this.formData.sx1.length>0 && this.formData.sx2.length == 0){
                    for(let d=0;d<vm.listdw_fuzhu.length;d++){
                        for(let a=0;a<this.formData.sx1.length;a++){
                            let sx1 = this.formData.sx1[a];
                            let sx2 = "";
                            this.addshuxing(sx1,sx2,this.listdw_fuzhu[d].dw);
                        }
                    }
                }
                if(this.formData.sx1.length == 0 && this.formData.sx2.length > 0){
                    for(let d=0;d<vm.listdw_fuzhu.length;d++){
                        for(let i=0;i<this.formData.sx2.length;i++){
                            let sx1 = "";
                            let sx2 = this.formData.sx2[i];
                            this.addshuxing(sx1,sx2,this.listdw_fuzhu[d].dw);
                        }
                    }
                }
                if(this.formData.sx1.length == 0 && this.formData.sx2.length == 0){
                    for(let d=0;d<vm.listdw_fuzhu.length;d++){
                        let sx1 = "";
                        let sx2 = "";
                        this.addshuxing(sx1,sx2,this.listdw_fuzhu[d].dw);
                    }
                }
            },
            //启用多单位
            duodanweiInput(){
                let btn = {btn: ['保存', '取消']
                    ,yes: async function(index, layero){
                        let win = getTopIframe(layero);
                        Vue.set(vm.formData,"dw",win.vm.formData.dw);
                        if(win.vm.listfuzhu.length>0){
                            vm.listdw_fuzhu = win.vm.listfuzhu;
                        }
                        for(let a=0;a<vm.listdw_fuzhu.length;a++){
                            if(vm.listdw_fuzhu[a].sl == undefined || vm.listdw_fuzhu[a].sl == ""){
                                top.alert("请填写倍率！");
                                return;
                            }
                        }
                        vm.listdw_fuzhu.splice(0,0,{"dw":vm.formData.dw,sl:"1"});
                        vm.formData.dwstr = "";
                        vm.listdw_fuzhu.forEach(function (e,index){
                            if(vm.formData.dwstr == ""){
                                vm.formData.dwstr = vm.mapdwname[vm.formData.dw];
                            }else {
                                vm.formData.dwstr = vm.formData.dwstr+"/("+vm.mapdwname[e.dw]+"="+e.sl+vm.mapdwname[vm.formData.dw]+")";
                            }
                        });
                        vm.shuxingChange();
                        top.layer.close(index);
                        return ;
                    }
                    ,btn2: function(index, layero){
                        //按钮【按钮二】的回调
                        //return false 开启该代码可禁止点击该按钮关闭
                    }};
                if(this.formData.kqddw){
                    top.f_layer_open_get("/admin/html/module/jinxiaocun/jichuziliao/shangpin_qiyong_duodanwei_input.html?dw="+this.formData.dw,"800px","600px",function () {
                    },btn,"多单位设置",{"listdw_fuzhu":vm.listdw_fuzhu})
                }else {
                    vm.listdw_fuzhu = [];
                    vm.listdw_fuzhu.splice(0,0,{"dw":vm.formData.dw,sl:"1"});
                    vm.shuxingChange();
                }

            },
            loadCascader(){
                this.cascaderProps.spfl = {//三级联动动态加载
                    lazy: true,
                    checkStrictly : true,
                    async lazyLoad (node, resolve){
                        console.log("node:",node);
                        let pid = "0000";
                        if(node.level != '0'){
                            pid = node.data.value;
                        }
                        const res = await listAdmin(getTableId("953"),"id",{pid:pid});
                        let nodes = [];
                        let nodesList = res.data;
                        for(let c=0;c<nodesList.length;c++){
                            nodes.push({value:nodesList[c]["id"],label:nodesList[c]["name"],level:1});
                        }

                        resolve(nodes);
                    }
                }
            }
        }
    })
</script>
</html>